<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body class="tundra">
  	<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.js" 
		djConfig="parseOnLoad: false, usePlainJson: true, locale: 'ROOT'" type="text/javascript"></script>
	<script type="text/javascript" src="http://rforms.googlecode.com/files/rforms_ROOT.js"></script>
	<script type="text/javascript" src="http://rforms.googlecode.com/files/rforms.js"></script>

	<style>
		@import "http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/tundra/tundra.css";
		@import "http://rforms.googlecode.com/svn/trunk/src/rforms/view/resources/rforms.css";
	</style>
	<script>
		testdata = {};

		//A simple template showing a title and an creator in the form of a foaf:Person with a firstname and lastname.
		//The person being shown in a table format.
		testdata.templateSrc = {
			"root":{
				"type":"group",
				"content":[
					{
						"type":"text",
						"nodetype":"LANGUAGE_LITERAL",
						"property":"http://purl.org/dc/terms/title",
						"cardinality": {"min": 2, "pref": "4", "max": 5},
						"label":{"en":"Title"},
						"description":{"en":"A short title of the resource"}
					}, {
						"type":"group",
						"nodetype":"RESOURCE",
						"label":{"en":"Creator"},
						"property":"http://purl.org/dc/terms/creator",
						"cardinality": {"min": 0, "max": 5},
						"constraints":{"http://www.w3.org/TR/rdf-schema/type":"http://xmlns.com/foaf/0.1/Person"},
						"content":[
							{
								"type":"text",
								"nodetype":"ONLY_LITERAL",
								"property":"http://xmlns.com/foaf/0.1/firstName",
								"cardinality": {"min": 1, "max": 1},
								"label":{"en":"First name"}
							},{
								"type":"text",
								"nodetype":"ONLY_LITERAL",
								"property":"http://xmlns.com/foaf/0.1/surname",
								"cardinality": {"min": 1},
								"label":{"en":"Surname"}
							}
						]
					}
				]
			}
		};
		
		//Simple rdfjson data, all triples are matched into the template.
		testdata.rdfSrc = {
			"http://example.org/about" : {
		        "http://purl.org/dc/terms/title"   : [ { "value" : "Anna's Homepage", "type" : "literal", "lang" : "en" } ] ,
		        "http://purl.org/dc/terms/creator" : [ { "value" : "_:person", "type" : "bnode" } ]
		    } ,
		 
		    "_:person" : {
				"http://www.w3.org/TR/rdf-schema/type"	  : [ { "value" : "http://xmlns.com/foaf/0.1/Person", "type" : "uri"}],
		        "http://xmlns.com/foaf/0.1/firstName"     : [ { "value" : "Anna", "type" : "literal" } ] ,
		        "http://xmlns.com/foaf/0.1/surname"       : [ { "value" : "Wilder", "type" : "literal" } ]
		    }
		};	
	</script>
	
	<script type="text/javascript">
		dojo.require("rforms.template.ItemStore");		
		dojo.require("rdfjson.Graph");
		dojo.require("rforms.model.Engine");
		dojo.require("rforms.view.Editor");

		dojo.addOnLoad(function() {
			var itemStore = new rforms.template.ItemStore();
	 		var template = itemStore.createTemplate(testdata.templateSrc);
			var graph = new rdfjson.Graph(testdata.rdfSrc);
			var binding = rforms.model.match(graph, "http://example.org/about", template);
			new rforms.view.Editor({template: template, binding: binding}, "compactView");
			
			document.getElementById("rforms_form").onsubmit = function() {
				var data = dojo.toJson(graph.exportRDFJSON(), 1);
				document.getElementById("rdfjson").value = data;				
			};
		});
	</script>
	<div id="compactView"></div>
	<form id="rforms_form" name="rforms" method="POST">
		<input name="rdfjson" id="rdfjson" style="display:none;">
		<input style="float:right;" id="save" type="submit" name="save" value="Save">
	</form>
  </body>
</html>